<template>
  <h1>{{ msg }}</h1>
  <button @click="count++">count is: {{ count }}</button>
  <p>
    {{ repositories }}
    Edit <code>components/HelloWorld.vue</code> to test hot module replacement.
  </p>
  <button @click="getUserRepositories">按钮</button>
  <input type="text" ref="input" />

  <div v-if="iff === 0">0</div>
  <div v-else-if="iff === 1">1</div>
  <div v-else-if="iff === 2">2</div>
  <div v-else>3</div>
</template>

<script>
import { ref, onMounted, watch } from "vue";
const fetchUserRepositories = function (value) {
  return new Promise(function (resolve) {
    setTimeout(() => {
      resolve(value + 1);
    }, 3000);
  });
};
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  setup(props, context) {
    const repositories = ref(0);
    const input = ref(0);

    console.log(repositories, repositories.value);
    const getUserRepositories = async () => {
      console.log("开始");
      console.log(input);
      // Attributes (Non-reactive object)
      console.log(context.attrs);

      // Slots (Non-reactive object)
      console.log(context.slots);

      // Emit Events (Method)
      console.log(context.emit);
      console.log(props);

      repositories.value = await fetchUserRepositories(repositories.value);

      console.log("结束");
    };

    onMounted(() => {
      console.log(input.value.focus());
      getUserRepositories();
    });

    watch(repositories, (newValue, oldValue) => {
      console.log({ newValue, oldValue }, repositories.value);
    });

    return {
      repositories,
      getUserRepositories,
      input,
    };
  },
  data() {
    return {
      count: 0,

      iff: 1,
    };
  },
  mounted() {
    console.log("这是mounted");
    console.log(this.getUserRepositories());
  },
};
</script>
